<template>
  <div class="contanct" @wheel="pageUpOrDown($event)">
    <!-- 背景随滚轮变化 -->
    <div
      class="grid-bg"
      :style="`background-size:100% ${grid_img_size}px`"
    ></div>
    <div class="contanct-center">
      <!-- c字母处图片，福利优惠 -->
      <div class="banner1_0">
        <div class="banner1">
          <img src="./imgs/banner01.91c3d4e.png" alt="" class="bannerwidth" />
          <img src="./imgs/C.6d7e92b.png" alt="" class="banner1-img1" />
          <img
            src="./imgs/banner-title.cc64690.png"
            alt=""
            class="banner1-img2"
          />
        </div>
      </div>
      <!-- 二维码 -->
      <div class="banner2_0">
        <div class="banner2">
          <div>
            <img src="./imgs/2.bf5748e.png" alt="" />
          </div>
          <div>
            <img src="./imgs/4.2ddfede.png" alt="" />
          </div>
          <div>
            <img src="./imgs/1.d2366e8.png" alt="" />
          </div>
          <div>
            <img src="./imgs/3.dc24eaf.png" alt="" />
          </div>
        </div>
      </div>
      <!-- O处图片，搞笑干货 -->
<div class="banner3_0">
        <div class="banner3">
        <img src="./imgs/banner02.fa6eea0.png" alt="" class="banner3-img1"/>
        <img src="./imgs/O.803ffd0.png" alt="" class="banner3-img2" />
      </div>
</div>
      <!-- 可乐优品，L处图片 -->
<div class="banner4_0">
        <div class="banner4">
        <img src="./imgs/5.d872755.png" alt="" />
        <img src="./imgs/6.70dd548.png" alt="" />
        <img src="./imgs/L.e36a774.png" alt="" class="banner4-img1" />
      </div>
</div>
      <!-- A处图片，联系我们 -->
<div class="banner5_0">
        <div class="banner5">
        <img src="./imgs/banner03.6772d2f.png" alt="" class="banner5-img1" />
        <h1>客服小优热线：400-660-8971</h1>
        <p>（周一至周日 9:00-24:00）</p>
        <h1>可乐优品商城APP在线客服</h1>
        <p>（周一至周日 9:00-24:00）</p>
        <img src="./imgs/7.a311caa.png" alt="" />
        <p>微信小优号：Colagoods-</p>
        <img src="./imgs/A.a778272.png" alt="" class="banner5-img2" />
      </div>
</div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      grid_img_size: 800,
      flag: true,
    };
  },
  methods: {
    //背景随滚轮变化
    pageUpOrDown(e) {
      if (this.flag) {
        this.flag = false;
        if (e.wheelDeltaY > 0) {
          this.grid_img_size =
            this.grid_img_size < 800 ? this.grid_img_size + 10 : 800;
        } else {
          this.grid_img_size =
            this.grid_img_size > 560 ? this.grid_img_size - 10 : 560;
        }
        setTimeout(() => {
          this.flag = true;
        }, 0.5);
      }
    },
  },
};
</script>

<style scoped>
.bannerwidth {
  width: 700px;
}
.grid-bg {
  display: block;
  position: fixed;
  top: 70px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: url(https://s1.huishoubao.com/colagoods/app/static/img/grid-bg.b9ef82a.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: -10;
  transition: background-size 0.5s linear;
}
.contanct {
  margin-top: 60px;
  position: relative;
  overflow: hidden;
  height: 3500px;
}
.contanct-center {
  position: absolute;
  margin: 10px auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}
.banner1_0 {
  width: 60%;
  margin: 0 auto;
}
.banner1 {
  width: 100%;
  margin-top: 30%;

  padding-bottom: 50px;
  box-sizing: content-box;
  position: relative;
  text-align: right;
}
.bannerwidth {
  width: 60%;
}
.banner1-img1 {
  width: 30%;
  position: absolute;
  top: -70%;
  left: 0px;
}
.banner1-img2 {
  position: absolute;
  top: -60%;
  right: 0;
  width: 15%;
}
.banner2_0 {
  width: 60%;
  margin: 0 auto;
}
.banner2 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 10% auto;
  flex-wrap: wrap;
  text-align: center;
}
.banner2 div {
  width: 25%;
  text-align: center;
}
/* .banner2 img {
  margin: 0 40px;
} */
.banner3_0{
  width: 60%;
  margin: 0 auto;
}
.banner3 {
  margin: 10% 0;
}
.banner3-img1{
  width: 60%;
}
.banner3-img2 {
  position: relative;
  top: 70px;
  width: 30%;
}
.banner4_0{
  width: 60%;
  margin: 0 auto;
}
.banner4 {
  display: flex;
  justify-content: center;
  margin-top: 200px;
  position: relative;
}
.banner4 img {
  margin: 0 40px;
  width: 20%;
}
.banner4-img1 {
  position: absolute;
 bottom: -60%;
  left: -10%;
  width: 30%;
  z-index: -1;
}
.banner5_0{
  width: 60%;
  margin: 0 auto;
}
.banner5 {
  margin-top: 300px;
  text-align: center;
  position: relative;
}
.banner5-img1 {
  margin-bottom: 100px;
  width: 60%;
}
.banner5 h1 {
  font-size: 45px;
  margin-bottom: 20px;
}
.banner5 p {
  margin-bottom: 40px;
  font-size: 28px;
  color: rgb(125, 129, 129);
}
.banner5-img2 {
  position: absolute;
  bottom: 0;
  right: -20%;
  width: 30%;
}
@media screen and (max-width: 1255px) {
  /* .contanct{
    height: 300px;
  } */
  .banner1_0,.banner2_0,.banner3_0,.banner4_0{
    width: 80%;
    margin: 0 auto;
  }
  .banner2 div {
    width: 40%;
    text-align: center;
  }
  .banner2 div img{
    width: 100%;
  }
  .banner4 img{
    width: 30%;
  }
  .banner4-img1 {
    
  }
  .banner5 h1 {
  font-size: 30px;
  margin-bottom: 20px;
}
.banner5 p {
  margin-bottom: 40px;
  font-size: 20px;
  color: rgb(125, 129, 129);
}
  /* .banner2 div img{
  width: 100%;
  } */
}
@media screen and (max-width: 900px){
  .contanct{
    height: 2400px;
  }
}
</style>